<template>
	<view class="uni-wrap">
		<u-sticky bgColor="#fff">
			<u-tabs
				:list="tabList"
				:scrollable="false"
				:activeStyle="{
					fontWeight: 'bold'
				}"
				@click="tabClick">
			</u-tabs>
		</u-sticky>
		
		<view v-if="tabIndex === 0">
			<view class="data-box">
				<view class="form-block">
					<view class="card">
						<view class="card-body">
							<u--form
							class="from-card"
							labelPosition="top"
							labelWidth="80"
							:model="info"
							:rules="rules"
							ref="ruleForm">
								<u-form-item
								label="请假类型"
								prop="type"
								required
								@click="pickShow = true;"
								borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									v-model="info.typeName"
									placeholder="请选择"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item
								label="开始时间"
								prop="beginTimeName"
								labelWidth="100"
								required
								@click="editStartTime()"
								borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									placeholder="请选择"
									v-model="info.beginTime"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item
								label="结束时间"
								prop="endTimeName"
								labelWidth="100"
								required
								@click="editEndTime()"
								borderBottom>
									<u--input
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									placeholder="请选择"
									v-model="info.endTime"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item label="时长(天)" prop="duration" labelWidth="100" required borderBottom>
									<u--input
									placeholder="请输入时长"
									v-model="info.duration"
									type="digit"
									border="none">
									</u--input>
								</u-form-item>
								<u-form-item prop="reason" label="请假事由" required borderBottom>
									<u--textarea
									v-model="info.reason"
									border="none"
									autoHeight
									count
									height="140"
									placeholder="请输入请假事由" >
									</u--textarea>
								</u-form-item>
							</u--form>
						</view>
					</view>
				</view>
			</view>
			
			<uni-group>
				<u--form
				class="from-card"
				labelPosition="top"
				labelWidth="180">
					<u-form-item label="图片">
						<u-upload
							:fileList="imageList"
							@afterRead="afterRead($event,'imageList')"
							@delete="deletePic($event,'imageList')"
							:multiple="true"
							:maxCount="9">
						</u-upload>
					</u-form-item>
				</u--form>
			</uni-group>
			
			<uni-section title="流程" type="line">
				<view style="margin-left: 20rpx;">
					<u--form
					class="from-card"
					labelPosition="top"
					labelWidth="180">
						<u-form-item :label="'审批人('+(userList.length>0?userList.length+'人依次审批':'请选择审批人')+')'">
							<view class="card-plus-t user-t" style="">
								<view class="pers-list">
									<view class="per-list per-all"  v-if="userList.length>showLength"
										@click="gotoPage('/components/choose-user/addMore?type=审批人&chooseUsers='+encodeURIComponent(JSON.stringify(userList)))">
										<view class="pers-pic">
											<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
												<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
											</u-avatar>
										</view>
										<text class="pers-name all-users">查看全部</text>
										<view class="pers-icon">
											<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
									<view class="per-list" v-for='(it,i) in userList.length>showLength?userList.slice(-showLength):userList' :key='i'>
										<view class="pers-pic">
											<u-avatar
												v-if="it.avatar"
												shape="square"
												size="35"
												:src="it.avatar">
											</u-avatar>
											<u-avatar
												v-else
												:text="it.userName.slice(1)"
												:fontSize="it.userName.length > 2?12:15"
												shape="square"
												size="35"
												bgColor="#0087FC">
											</u-avatar>
											<view class="pers-close" style="" @click="closeUser(i,'userList')">
												<u-icon name="close" color="#ffffff" size="18rpx"
													customStyle="line-height: 20rpx;" bold></u-icon>
											</view>
										</view>
										<view class="image_bottom_text">
											<text class="pers-name">{{it.userName}}</text>
										</view>
										<view class="pers-icon">
											<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
								</view>
								<view class="card-plus-f plus-style"
									@click="gotoPage('/components/choose-user/choosePer?type='+'审批人&chooseUsers='+encodeURIComponent(JSON.stringify(userList)))">
									<uni-text class="span-style" v-if="userList.length<1">
										<span>*</span>
									</uni-text>
									<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
								</view>
							</view>
						</u-form-item>
						<u-form-item :label="'抄送人('+(ccList.length>0?'抄送'+ccList.length+'人':'请选择抄送人')+')'">
							<view class="card-plus-t cc-t">
								<view class="per-list per-all"  v-if="ccList.length>showLength"
									@click="gotoPage('/components/choose-user/addMore?type=抄送人&chooseUsers='+encodeURIComponent(JSON.stringify(ccList)))">
									<view class="pers-pic">
										<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
											<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
										</u-avatar>
									</view>
									<text class="pers-name all-users">查看全部</text>
									<view class="pers-icon">
										<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
									</view>
								</view>
								<view class="pers-list">
									<view class="per-list" v-for='(it,i) in ccList.length>showLength?ccList.slice(-showLength):ccList' :key='i'>
										<view class="pers-pic">
											<u-avatar
												v-if="it.avatar"
												shape="square"
												size="35"
												:src="it.avatar">
											</u-avatar>
											<u-avatar
												v-else
												:text="it.userName.slice(1)"
												:fontSize="it.userName.length > 2?12:15"
												shape="square"
												size="35"
												bgColor="#0087FC">
											</u-avatar>
											<view class="pers-close" style="" @click="closeUser(i,'ccList')">
												<u-icon name="close" color="#ffffff" size="18rpx"
													customStyle="line-height: 20rpx;" bold></u-icon>
											</view>
										</view>
										<text class="pers-name">{{it.userName}}</text>
										<view class="pers-icon">
											<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
										</view>
									</view>
								</view>
								<view class="card-plus-s plus-style"
									@click="gotoPage('/components/choose-user/choosePer?type=抄送人&chooseUsers='+encodeURIComponent(JSON.stringify(ccList)))">
									<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
								</view>
							</view>
						</u-form-item>
					</u--form>
				</view>
			</uni-section>
			
			<view class="submit-button">
				<view class="submit-block" @click="submit()">
					提交
				</view>
			</view>
		</view>
		
		<view v-if="tabIndex == 1">
			<view style="margin-top: 100rpx;" v-if="list.length < 1">
				<u-empty
					text="暂无数据"
					icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
				</u-empty>
			</view>
			<u-swipe-action>
				<u-swipe-action-item
					:disabled="userIdentity"
					:options="options"
					v-for="(item,index) in list" :key="item.id">
					<view class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/vacation/detail?type=qj&spType=用户&id='+item.id)">
						<view class="PhotographerBoxR" style="margin-left: 30rpx;">
							<view class="text-sm text-black" style="font-size: 32rpx;">
								<view>{{item.userName}}提交的请假</view>
								<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 25rpx 50rpx 0 0;">
									{{item.tjDate}}
								</view>
							</view>
							<view class="text-sm text-grey margin-top-xs">请假类型：{{item.type}}</view>
							<view class="text-sm text-grey margin-top-xs">开始时间：{{item.beginTime}}</view>
							<view class="text-sm text-grey margin-top-xs">结束时间：{{item.endTime}}</view>
							<view class="text-sm text-grey margin-top-xs" style="display: flex;margin-top: 30rpx;">
								<view>
									<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
									<u-avatar
										v-else
										size="20"
										shape="square"
										:text="item.userName.slice(1)"
										:fontSize="item.userName.length > 2?8:12"
										bgColor="#0087FC">
									</u-avatar>
								</view>
								<span style="padding-left: 10rpx;color: #000;font-size: 28rpx;">由{{item.userName}}提交</span>
								<view style="position: absolute;right: 0;margin-right: 48rpx;">
									<text v-if="item.status == 0" style="color: #E6900D;font-weight: 26rpx;">{{item.spName+'处理中'}}</text>
									<text v-if="item.status == 1" style="color: #269B54;font-weight: 26rpx;">审批通过</text>
									<text v-if="item.status == 2" style="color: #D67D6F;font-weight: 26rpx;">审批拒绝</text>
									<text v-if="item.status == 3" style="color: #909399;font-weight: 26rpx;">已撤销</text>
								</view>
							</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		
		<u-picker
			:immediateChange="true"
			:show="pickShow"
			:columns="columns"
			@confirm="confirmPick"
			keyName="name"
			@cancel="pickShow = false">
		</u-picker>
		
		<!-- 时间 -->
		<view v-show="timeSelectShow" class="timeSelectBox">
			<view class="shadow"  @click="confirmDate"></view>
			<view class="timeSelect">
				<view class="silderBtn">
					<view :class="timeSelectIndex===0? 'title select':'title'" @click="timeSelectIndex=0">{{ timeSelectType[0].name }}</view>
					<view v-show="info.type =='按半天'?true:false" :class="timeSelectIndex===1? 'title select':'title'" @click="timeSelectIndex=1">{{ timeSelectType[1].name }}</view>
					<view class="line" :style="'left:' + ((timeSelectIndex *200) +100) + 'rpx'"></view>
				</view>
				<view class="silder" :style="'transform: translateX(' + timeSelectIndex*-100 + 'vw)'">
					<view :class="timeSelectIndex===0? 'dateBox select':'dateBox'">
						<!-- <u-calendar :minDate='minDate' :show="timeSelectShow" @confirm="confirm" :defaultDate="timeSelectType[0].name" monthNum ="4"></u-calendar> -->
						<uni-calendar ref="calendar" :clear-date="true" :date="timeSelectType[0].name" insert="false" @change="confirm" />
					</view>
					<view v-show="info.type == '按半天'" :class="timeSelectIndex===1? 'dateBox select':'dateBox'">
						<view>
								<u-picker
									immediateChange
									show
									@change="timerChange"
									:columns="dateHalf"
									:defaultIndex="defaultIndex">
								</u-picker>
							<view class="timerBtn" >
								<u-button @click="confirmDate" type="primary" text="确定"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { strFormatMinutes } from '@/utils/format.js'
	import { getDicts } from '@/api/dict.js'
	import { getList,add } from '@/api/vacation.js'
	import { uploadFile,removeByOssId } from '@/api/upload'
	export default {
		data() {
			return {
				dateField:'',
				dateShow:false,
				dateValue:String(new Date),
				imageList:[],
				pickIndex:0,
				pickShow:false,
				columns:[],
				showLength:4,
				pageNum:1,
				list:[],
				tabIndex:0,
				tabList:[
					{
						name: '发起提交',
					}, 
					{
						name: '查看数据',
					}
				],
				amountAll:'',
				dateHalf:[['上午','下午']],
				imageStyles:{
					width:64,
					height:64,
				},
				process: [
					{
						title: '审批人',
						desc: '请选择审批人'
					}, 
					{
						title: '抄送人',
						desc: '请选择抄送人'
					}, 
				],
				info:{
					typeName:'事假',
					type:'按半天',
					reason:'',
					beginTime:'',
					endTime:'',
					duration:0,
				},
				rules:{
					'type': {
						type: 'string',
						required: true,
						message: '请选择报销类型',
						trigger: ['blur', 'change']
					},
					'beginTime': {
						type: 'string',
						required: true,
						message: '请选择开始时间',
						trigger: ['blur', 'change']
					},
					'endTime': {
						type: 'string',
						required: true,
						message: '请选择结束时间',
						trigger: ['blur', 'change']
					},
					'reason': {
						type: 'string',
						required: true,
						message: '请输入请假事由',
						trigger: ['blur', 'change']
					},
				},
				desc1: '请选择审批人',
				desc2: '请选择抄送人',
				userList: [],
				ccList: [],
				timeSelectShow:false,
				timeSelectType:[{
					name:''
				},{
					name:''
				}],
				timeSelectIndex:0,
				defaultIndex:[0],
				options: [{
					text: '删除'
				}],
				userIdentity:true,
				minDate:''
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.ruleForm.setRules(this.rules)
		},
		onReachBottom(){
			if(this.tabIndex == 1){
				this.pageNum += 1
				this.getListData()
			}
		},
		onPullDownRefresh(){
			if(this.tabIndex == 1){
				this.pageNum = 1
				this.list = []
				this.getListData()
				uni.stopPullDownRefresh()
			}
		},
		onLoad() {
			this.getdictList()
			this.formatDate(new Date())
		},
		methods: {
			confirmDate(e){
				if(this.info.type == '按半天') {
					this.info[this.dateField] = this.timeSelectType[0].name + ' ' + this.timeSelectType[1].name
					if(this.info.beginTime!=''&& this.info.endTime!='') {
						var d1 = new Date(this.info.beginTime.split(' ')[0].split("-").join("/"));
						var d2 = new Date(this.info.endTime.split(' ')[0].split("-").join("/"));
						var date = parseInt(d2 - d1)/ 1000 / 60/ 60/24
						if(this.info.beginTime.split(' ')[1] == '上午') {
							date = this.info.beginTime.split(' ')[1] == this.info.endTime.split(' ')[1]?date + 0.5:date + 1
						}else {
							date = this.info.beginTime.split(' ')[1] == this.info.endTime.split(' ')[1]?date+0.5:date
						}
						this.info.duration = date
					}
				}else {
					this.info[this.dateField] = this.timeSelectType[0].name
					if(this.info.beginTime!=''&& this.info.endTime!='') {
						var d1 = new Date(this.info.beginTime.split("-").join("/"));
						var d2 = new Date(this.info.endTime.split("-").join("/"));
						var date = parseInt(d2 - d1)/ 1000 / 60/ 60/24
						date = date+1
						this.info.duration = date
					}
				}
				this.timeSelectShow = false
			},
			submit(){
				this.$refs.ruleForm.validate().then(res => {
					if(this.userList.length<1){
						uni.$u.toast('请选择审批人')
						return
					}
					if(this.info.beginTime.split(' ')[0] > this.info.endTime.split(' ')[0]){
						uni.$u.toast('结束时间必须大于开始时间')
						return
					}else if(this.info.type == '按半天' && this.info.beginTime.split(' ')[0] == this.info.endTime.split(' ')[0] && this.info.beginTime.split(' ')[1]=='下午' && this.info.endTime.split(' ')[1]=='上午' ){
						uni.$u.toast('结束时间必须大于开始时间')
						return
					}else if(this.info.beginTime > this.info.endTime){
						uni.$u.toast('结束时间必须大于开始时间')
						return
					}
					// 提交审核
					this.info.images = this.imageList.map(e=>e.url).join(',')
					this.info.spList = this.userList
					this.info.csList = this.ccList
					this.addVacation()
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			},
			async addVacation(){
				const info = JSON.parse(JSON.stringify(this.info))
				info.type = this.info.typeName
				const { data } = await add(info,this.info.type);
				if(data.code == 200){
					uni.showToast({ title: '提交成功', icon: 'none' })
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			// 读取图片后事件
			afterRead(list,name) {
				list.file.forEach(e=>{
					this.uploadImage(e,name)
				})
			},
			async uploadImage(e,name){
				const result = await uploadFile(e.url)
				this[name].push(result)
			},
			// 删除图片后事件
			async deletePic(e,name) {
				let ossIds = []
				ossIds.push(this[name][e.index].ossId)
				const result = await removeByOssId(ossIds);
				this[name].splice(e.index, 1)
			},
			confirmPick(e){
				this.pickShow = false
				this.info.typeName =  e.value[0].name
				this.info.duration = this.info.beginTime = this.info.endTime = ''
				this.formatDate(new Date())
				this.info.type = e.value[0].id<=3? '按半天':'按整天'
			},
			closeUser(index,type) {
				if(this[type].length>this.showLength){
					this[type].splice(index+this[type].length-this.showLength,1)
				}else{
					this[type].splice(index,1)
				}
			},
			setUsers(e) {
				this.userList = e
			},
			setCc(e) {
				this.ccList = e
			},
			async getdictList(){
				const { data } = await getDicts('zxch_vacatoin_type');
				if(data.code == 200){
					data.data.map(e=>{
						let obj = {
							id: e.dictValue,
							name: e.dictLabel
						}
						this.columns.push(obj)
					})
					this.columns = [this.columns]
				}
			},
			async getListData(){
				let params = {
					pageNum:this.pageNum,
				}
				const { data } = await getList(params);
				if(data.code == 200 && data.rows.length > 0){
					this.list = [...this.list,...data.rows]
				}
			},
			tabClick(item) {
				this.tabIndex = item.index
				if(item.index == 1){
					this.pageNum = 1
					this.list = []
					this.getListData()
				}
			},
			formatDate(newDate) {
			    let date = newDate;
			    let YY = date.getFullYear();
			    let MM = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			    let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			    let hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			    let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			    let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			
				// 这里修改返回时间的格式
				this.timeSelectType[0].name = YY + "-" + MM + "-" + DD
				this.timeSelectType[1].name = hh + ":" + mm
				this.info.type == '按半天'? this.timeSelectType[1].name ='上午':''
				this.minDate = this.getPreMonth()
			},
			timerChange(e){
				this.timeSelectType[1].name = e.value[0]
			},
			confirm(e) {
				this.timeSelectType[0].name = e.fulldate
				console.log(e)
				if(this.info.type == '按半天') {
					this.timeSelectIndex = 1
				}else {
					this.confirmDate()
				}
			},
			editStartTime(){
				if(this.info.type!=''){
					this.timeSelectShow = true;
					this.dateField = 'beginTime';
					this.timeSelectIndex = 0;
					if(this.info.beginTime!='' && this.info.type == '按半天') {
						this.timeSelectType[0].name = this.info.beginTime.split(' ')[0]
						this.timeSelectType[1].name = this.info.beginTime.split(' ')[1]
						this.info.beginTime.split(' ')[1] == "上午"?this.defaultIndex = [0]:this.defaultIndex = [1]
					}else if(this.info.beginTime!='' && this.info.type == '按天') {
						this.timeSelectType[0].name = this.info.beginTime
						this.timeSelectType[1].name = this.info.beginTime
					}
				}
			},
			editEndTime(){
				if(this.info.type!=''){
					this.timeSelectShow = true;
					this.dateField = 'endTime';
					this.timeSelectIndex = 0;
					if(this.info.endTime!='' && this.info.type == '按半天') {
						this.timeSelectType[0].name = this.info.endTime.split(' ')[0]
						this.timeSelectType[1].name = this.info.endTime.split(' ')[1]
						this.info.endTime.split(' ')[1] == "上午"?this.defaultIndex = [0]:this.defaultIndex = [1]
					}else if(this.info.endTime!='' && this.info.type == '按天') {
						this.timeSelectType[0].name = this.info.endTime
						this.timeSelectType[1].name = this.info.endTime
					}
				}
			},
			getPreMonth() {
			    var arr = this.getNowMonth().split("-");
			    var year = arr[0]; //获取当前日期的年份
			    var month = arr[1]; //获取当前日期的月份
			 
			    var year2 = year;
			    var month2 = parseInt(month) - 1;
			    if (month2 == 0) {
			        //1月的上一月是前一年的12月
			        year2 = parseInt(year2) - 1;
			        month2 = 12;
			    }
			 
			    if (month2 < 10) {
			        //10月之前都需要补0
			        month2 = "0" + month2;
			    }
			    var preMonth = year2 + "-" + month2;
			    return preMonth;
			},
			getNowMonth() {
			    var date = new Date();
			    var year = date.getFullYear();
			    var month = date.getMonth() + 1;
			    month = month > 9 ? month : "0" + month;
			    var nowMonth = year + "-" + month;
			    return nowMonth;
			}
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.del-detail{
		color: #027fff;
		position: absolute;
		right: 0;
		top: 0;
		margin-top: 20rpx;
		margin-right: 30rpx;
	}
	
	.card-body-steps {
		display: inline-block;
	}
	
	.card-plus {
		display: inline-block;
		float: right;
		margin: 0 10rpx;
	}
	
	.plus-style {
		border: 1rpx solid #ededed;
		padding: 15rpx;
		margin: 0 10rpx 10rpx 0;
		position: relative;
		height: 40rpx;
		/* height: 15rpx; */
		border-radius: 15rpx;
	}
	
	.span-style {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		color: red;
		font-size: 50rpx;
		width: 20rpx;
		height: 20rpx;
		line-height: 35rpx;
		text-align: center;
	}
	
	.u-text__value {
		color: white !important;
	}
	
	
	.pers-list {
		display: flex;
		flex-direction: row;
		justify-content: right;
	}
	
	.per-list {
		margin-right: 50rpx;
	}
	
	
	
	.pers-pic {
		height: 65rpx;
	}
	
	.card-plus-t {
		display: flex;
		/* flex-direction: row-reverse; */
		/* justify-content: right; */
		text-align: center;
	
	}
	
	.user-t {
		margin: 15rpx 0 10rpx 0;
	}
	
	.cc-t {
		margin: 10rpx 0 15rpx 0;
	}
	
	.image_bottom_text{
		margin-top: 5rpx;
	}
	
	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
		width: 50rpx;
	}
	
	.pers-close {
		background-color: rgb(198, 199, 203);
		width: 18rpx;
		height: 18rpx;
		border-radius: 18rpx;
		padding: 5rpx;
		position: absolute;
		margin-top: -80rpx;
		margin-left: 55rpx;
	
	}
	
	.pers-icon {
		position: relative;
		top: -80rpx;
		left: 88rpx;
		width: 26rpx;
	}
	
	.all-users {
		left: -10%;
		top: 5rpx;
		position: relative;
	}
	
	.per-all {
		margin-right: 22rpx;
	}
</style>
<style>
	.u-steps-item--column {
		margin: 30rpx 0 30rpx 10rpx;
		padding: 10rpx 0;
	}

	::v-deep .u-steps-item__line--column {
		height: 180rpx !important;
		background-color: #cdcdcd !important;
	}

	::v-deep .u-text__value--content {
		color: #131313;
		font-size: 33rpx !important;
	}

	::v-deep .u-steps-item__wrapper__dot {
		background-color: #cdcdcd !important;
	}
</style>
<style>
	.timeSelect .silder {
		transition:all 0 !important;
	}
	.timeSelectBox {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 9999999;
	}
	.timeSelectBox .shadow {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
	}
	.timeSelect {
		position: fixed;
		bottom: 0;
		width: 100vw;
		/* height: 76vh; */
		height: calc(100vw + 100rpx);
		background: #fff;
		z-index: 9;
	}
	.timeSelect .u-popup .u-transition,
	.timeSelect .u-popup .u-toolbar{
		display: none;
	}
	.timeSelect .silderBtn{
		position: relative;
		width: 100vw;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 60rpx;
		background-color: #ccc;
		display: flex;
		justify-content: left;
		align-items: center;
		color: #666;
	}
	.timeSelect .silderBtn .title {
		box-sizing: border-box;
		text-align: center;
		padding: 10rpx 0;
		height: 80rpx;
		width: 200rpx;
		transition: all .3s ease;
	}
	.timeSelect .silderBtn .title.select {
		background-color: #eee;
	}
	.timeSelect .silderBtn .line {
		position: absolute;
		width: 40rpx;
		height: 6rpx;
		background-color: #3c9cff;
		bottom: 10rpx;
		transform: translateX(-20rpx);
		transition: all .3s ease;
	}
	.timeSelect .silder {
		display: flex;
		justify-content: space-between;
		width: 200vw;
		/* height: calc(76vh - 80rpx); */
		height: 100vw;
		transform: translateX(0);
		transition: all .3s ease;
	}
	.timeSelect .dateBox {
		position: relative;
		width: 100vw;
	}
	.timeSelect .u-popup .u-calendar .u-calendar__confirm{
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		padding: 0 18px;
		width: 100vw;
	}
	.timeSelect .dateBox .u-popup>view:nth-child(2){
		position: absolute !important;
		top: 0 !important;
	}
	.timeSelect .timerBtn {
		-webkit-box-sizing: border-box;
		position:absolute;
		bottom: 0;
		width:calc(100vw - 36px);
		border-radius: 80rpx;
		overflow: hidden;
		margin: 7px 18px;
		z-index: 99999999999;
	}
	.timeSelect .axs {
		position: relative;
		height: 100%;
	}
	.timeSelect .axs .u-popup>view:nth-child(2){
		position: absolute !important;
		top: 0 !important;
	}
</style>